<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
  </head>
  <body>
    <div
      id="map"
      style="height: 800px; width: 1000px"
    ></div>
    <script>
      // CRS是坐标系，使用 CRS.Simple 来代表一个正方形网格
      var map = L.map('map', {
        crs: L.CRS.Simple,
        minzoom: -5,
      });
      // 添加 L.ImageOverlay 星图图像及其 approximate 边界
      var bounds = [
        [0, 0],
        [1000, 1000],
      ];
      var image = L.imageOverlay('uqm_map_400px.png', bounds).addTo(map);
      // 显示整个地图
      map.fitBounds(bounds);
      // 创建包装器，将（x，y）坐标变为（y，x），CRS.Simple 中的坐标采用 [y, x] 的形式
      var yx = L.latLng; // 创建地理位置对象
      var xy = function (x, y) {
        if (Array.isArray(x)) {
          return yx(x[1], x[0]);
        }
        return yx(y, x);
      };
      // 添加导航线
      var sol = xy(175.2, 145.0);
      var mizar = xy(41.6, 130.1);
      var kruegerZ = xy(13.4, 56.5);
      var deneb = xy(218.7, 8.3);

      L.marker(sol).addTo(map).bindPopup('Sol');
      L.marker(mizar).addTo(map).bindPopup('Mizar');
      L.marker(kruegerZ).addTo(map).bindPopup('Krueger-Z');
      L.marker(deneb).addTo(map).bindPopup('Deneb');

      var travel = L.polyline([sol, deneb]).addTo(map); // 导航线
    </script>
  </body>
</html>
